<template>
  <div class="email_add">
    <div class="title">
      <!--<span class="el-icon-arrow-left" @click="cancel" ></span>{{$t('config.channel.enterpriseEmail')}}/{{$t('config.channel.enterpriseEmailAdd')}}-->
      <breadCrumb @back="cancel" :titleArr="titleArr"></breadCrumb>
    </div>
    <div class="mail_set_steps">
      <el-steps :space="'33.33%'" :active="active" finish-status="success" :align-center="true">
        <el-step :title="$t('configLazyLoad.channel.mailTip5')"></el-step>
        <el-step :title="$t('configLazyLoad.channel.mailTip6')"></el-step>
        <el-step :title="$t('configLazyLoad.channel.mailTip7')"></el-step>
      </el-steps>
    </div>
    <addOne v-show="this.active === 0" @cancel="cancel" @next="next" ref="one"></addOne>
    <addTwo v-show="this.active === 1" @cancel="cancel" @addMail="addMail" ref="two"></addTwo>
    <addThree v-show="this.active === 2" @refresh="refresh" @cancel="cancel" :random="random"></addThree>
  </div>
</template>
<script>
  import addOne from './FirmMailAddOne.vue'
  import addTwo from './FirmMailAddTwo.vue'
  import addThree from './FirmMailAddThree.vue'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'

  function addMailFun (store, data) {
    return store.dispatch('addMailConfig', data)
  }

  export default {
    name: 'FirmMailAdd',
    data () {
      return {
        active: 0,
        random: 1,
        titleArr: [this.$t('configLazyLoad.channel.mailTip8'), this.$t('configLazyLoad.channel.mailTip9')]
      }
    },
    methods: {
      cancel () {
        this.$emit('cancel')
      },
      next () {
        if (this.active++ > 1) {
          this.active = 2
        }
      },
      refresh () {
        this.$emit('refresh')
      },
      addMail () {
        let self = this
        let oneForm = this.$refs['one']
        let twoForm = this.$refs['two']
        let data = {
          relationMailId: oneForm.addMailFormOne.email,
          emailRelskillGroup: twoForm.addMailFormTwo.skillGroup,
          sign: twoForm.addMailFormTwo.signature,
          num: parseFloat(twoForm.addMailFormTwo.num),
          unit: twoForm.addMailFormTwo.unit,
          beforeNum: parseFloat(twoForm.addMailFormTwo.beforeNum),
          beforeUnit: twoForm.addMailFormTwo.beforeUnit,
          isOpen: twoForm.addMailFormTwo.isOpen,
          remindUser: twoForm.addMailFormTwo.remindUser,
          seatSendEvaluation: twoForm.addMailFormTwo.seatSendEvaluation,
          systemSendEvaluation: twoForm.addMailFormTwo.systemSendEvaluation,
          smtpSend: twoForm.addMailFormTwo.smtpSend,
          smtpHost: twoForm.addMailFormTwo.smtpHost,
          smtpPassword: twoForm.addMailFormTwo.smtpPassword,
          sslSend: twoForm.addMailFormTwo.sslSend,
          authSend: twoForm.addMailFormTwo.authSend
        }
        addMailFun(this.$store, data).then(() => {
          self.next()
          this.random += 1
        })
      }
    },
    components: {
      addOne,
      addTwo,
      addThree,
      breadCrumb
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .title
    font-size 14px
    .el-icon-arrow-left
      color $c-main
      border 1px solid $c-main
      border-radius 50%
      cursor pointer
      margin 0 5px 0 15px
  .mail_set_steps
    margin 20px 0
</style>
